<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>更新时的问题</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <button @click="updateMei">更新马冬梅信息</button>
            <!-- 遍历数组 -->
            <ul>
                <li v-for="(p,index) in personsArr" :key="index">
                    {{p.name}} - {{p.age}} - {{p.sex}}
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            
            const vm = new Vue({
                el:'#root', 
                data:{ 
                    personsArr:[
                        {id:'001',name:'马冬梅',age:18,sex:'女'},
                        {id:'002',name:'周冬雨',age:16,sex:'女'},
                        {id:'003',name:'周杰伦',age:25,sex:'男'},
                        {id:'004',name:'温兆伦',age:21,sex:'男'}
                    ]
                },

                methods: {
                    //更新马冬梅信息
                    updateMei(){
                        // 第一种更新--有效
                        // this.personsArr[0].name='马老师'
                        // this.personsArr[0].age=50
                        // this.personsArr[0].sex='男'
                        //第二种--无效  原因是在数组中，Vue没有为每一个元素设置get set方法，不是响应式数据
                        //this.personsArr[0] = {id:'001',name:'马老师',age:50,sex:'男'}
                        // 第三种--只有通过数组的七个方法（能改变自身元素的方法）
                        // push pop shift unshift splice sort reverse
                        this.personsArr.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
                        //Vue对数组监听了的七个方法，当调用了这7个方法，Vue才会更新页面中的数据
                        //也可以用Vue.set()方法修改，用的不多
                        //Vue.set(this.personsArr,1,{id:'001',name:'马老师',age:50,sex:'男'})
                    }
                },
            })


        </script>

        
    </body>
</html>